// 城市列表
<template>
  <div class="city-list">
    <div
      class="city-list-item"
      :class="{
        active: checkCityLIstActive(cities.province_id),
      }"
      v-for="cities in list"
      :key="cities.province_id"
      @click="onSelectCity(cities)"
    >
      <div class="city-name">{{ cities.province_name }}</div>
      <div class="arrows-right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cityList",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    cityHeadTabs: {
      type: Array,
      default: () => [],
    },
    currentType: {
      type: String,
    },
  },
  methods: {
    // 判断城市列表是不是被选择状态
    checkCityLIstActive(id) {
      return this.cityHeadTabs.some((item) => {
        return item.id === id;
      });
    },
    onSelectCity(city) {
      if (!this.currentType) {
        return this.$emit("submit", city);
      }
      this.$emit("changeCityList", city);
    },
  },
};
</script>

<style lang="scss" scoped>
.city-list {
  padding: 0 16px;
  flex-grow: 1;
  overflow-y: auto;
  .city-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;
    &.active {
      .city-name {
        color: red;
      }
    }
  }
  .city-name {
    font-weight: 500;
    color: #222;
  }
  .arrows-right {
    position: relative;
    width: 20px;
    height: 20px;
    &::after {
      position: absolute;
      left: 0;
      top: 10px;
      content: "";
      width: 14px;
      height: 2px;
      background-color: #e0e0e0;
      transform-origin: 90% 50%;
      transform: rotate(35deg);
    }
    &::before {
      position: absolute;
      left: 0;
      top: 12px;
      content: "";
      width: 14px;
      height: 2px;
      background-color: #e0e0e0;
      transform-origin: 90% 50%;
      transform: rotate(-35deg);
    }
  }
}
</style>
